<template>
  <div class="container">
    <Header
      v-bind:isBack="isBack"
      v-bind:title="title"
      :isSongSheet="isSongSheet"
      :sheetStatus="sheetStatus"
      :coverImgUrl="coverImgUrl"
      v-show="!isSinger"
    ></Header>
    <Header
      :isSinger="isSinger"
      v-bind:isBack="isBack"
      v-bind:title="title"
      :isSongSheet="isSongSheet"
      :sheetStatus="sheetStatus"
      :coverImgUrl="coverImgUrl"
      v-show="isSinger"
      @shareStatus="getShareStatus"
    ></Header>
    <div class="tip">
      <img
        :src="songSheetObj.song_sheet_photo||singerMes.singer_avator||baseImg"
        alt
        class="background"
      />
      <div class="top" v-show="!isSinger">
        <div class="left" v-show="!isSinger">
          <img :src="songSheetObj.song_sheet_photo" alt />
          <div class="play-mes" v-show="sheetStatus == 1">
            <div class="img">
              <img :src="playBtnS" alt />
            </div>
            <span class="num fs-24">{{songSheetObj.run_num}}次播放</span>
          </div>
        </div>
        <!--表示从歌单入口进来的 -->
        <div class="right" v-show="sheetStatus == 1 || sheetStatus == 0">
          <div class="title fs-38">{{songSheetObj.song_sheet_name}}</div>
          <div class="singers areatop" @click="checkSinger()">
            <span class="imgs">
              <img :src="songSheetObj.user_avator" alt />
            </span>
            <span class="txt fs-28">
              {{songSheetObj.nickname}}
              <img :src="lookMore" alt />
            </span>
          </div>
          <div class="song fs-24 areatop">
            <span class="more" @click="showModel">歌单简介</span>
          </div>
        </div>
        <!-- 排行榜入口进来的 -->
        <div class="right" v-show="sheetStatus == 3">
          <div class="title fs-38" style="margin-top:0.43rem;">{{songSheetObj.song_sheet_name}}</div>
          <div class="singers">
            <span class="txt fs-24">最近更新:{{songSheetObj.music_update_time}}</span>
          </div>
        </div>
      </div>
      <!-- 表示从歌手进来的 -->
      <div class="top-singer" v-show="isSinger">
        <div class="top-h">
          <div class="top-h-left">
            <div class="img">
              <img :src="singerMes.singer_avator" alt />
            </div>
            <div class="text">
              <span class="tit fs-38">{{singerMes.singer_artistic_name}}</span>
              <span class="tips fs-24">{{singerMes.style}}</span>
            </div>
          </div>
          <div class="right">
            <div class="home-page fs-24" @click="toPersonHome">个人主页</div>
            <div class="concern fs-24" @click="followSinger">
              <img v-if="singerMes.is_attention == 1" :src="concern" alt />
              <img v-else :src="noconcern" alt />
              <span v-if="singerMes.is_attention == 1">已关注</span>
              <span v-else>关注</span>
            </div>
          </div>
        </div>
        <div class="top-b">
          <span class="fans fs-26">粉丝:&nbsp;&nbsp;{{singerMes.fans_num}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span class="num fs-26">有{{singerMes.run_num}}人听过</span>
        </div>
      </div>
      <!-- 收藏，评论，分享，下载 -->
      <div class="icons space-between" v-show="!isSinger && sheetStatus != 0">
        <div class="item" @click="toComment(songSheetObj.comments_num)">
          <img :src="chat" alt class="icon" />
          <span class="text fs-26">{{songSheetObj.comments_num}}</span>
        </div>
        <div class="item">
          <img :src="share" alt class="icon" @click="toShare" />
          <span class="text fs-26">{{songSheetObj.share_num}}</span>
        </div>
        <div class="item">
          <img :src="collect" v-show="!isCollect" alt class="icon" @click="openCollectModel" />
          <img :src="collected" v-show="isCollect" alt class="icon" @click="openCollectModel" />
          <span class="text fs-26" v-show="!isCollect">收藏</span>
          <span class="text fs-26" v-show="isCollect">已收藏</span>
        </div>
        <div class="item">
          <img :src="downLoad" alt class="icon" />
          <span class="text fs-26">下载</span>
        </div>
      </div>
    </div>
    <!-- 歌手主页的中间导航部分 -->
    <div class="header-nav" v-show="isSinger" ref="headerNav">
      <div class="singles" v-for="item in headerNav" :key="item.id" @click="checkNav(item.id)">
        <span class="tit fs-32">{{item.text}}</span>
        <span class="number fs-26">{{item.number}}</span>
        <span class="line" v-show="item.id == navIndex"></span>
      </div>
    </div>
    <!-- 歌曲列表部分 -->
    <div class="song-list" v-show="navIndex == 1">
      <div class="title space-between">
        <div class="left space-between">
          <span class="icon">
            <img :src="playAll" alt @click="playAllMusic" />
          </span>
          <span class="tit fs-36">全部播放</span>
          <span class="num fs-26">共({{songSheetObj.music_num}})首</span>
        </div>
        <div class="right space-between" v-show="!isSinger">
          <span class="icon">
            <img :src="operate" alt />
          </span>
          <span class="txt fs-28" @click="toOperation">批量操作</span>
        </div>
        <div class="album-t-r fs-28 space-between" v-show="isSinger">
          <div class="img" @click="checkSortModel">
            <img
              :src="sort"
              style="width:0.25rem;height:0.24rem;margin-right:0.14rem;margin-top:0.05rem;"
              alt
            />
          </div>
          <span class="fs-28" style="color:#444444;font-weight:800;">排序</span>
        </div>
      </div>
      <div
        class="list space-between"
        v-for="item in songList"
        :key="item.id"
        @click="toSonDetail(item)"
      >
        <div class="left">
          <span class="song-name fs-36">{{item.music_name}}</span>
          <span class="mes">
            <img v-show="item.isDownLoad" :src="selected" alt />
            <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="exclusive" alt />
            <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="payment" alt />
            <span
              class="txt fs-26"
              v-show="sheetStatus != 3 && sheetStatus != 1"
            >{{item.singer_name}}-{{item.music_list_category_name || item.music_list_name}}</span>
            <span
              class="txt fs-26"
              v-show="sheetStatus == 3"
            >{{item.singer_name}}-{{item.music_list_name}}</span>
            <span
              class="txt fs-26"
              v-show="sheetStatus == 1"
            >{{item.singer_artistic_name}}-{{item.music_list_name}}</span>
          </span>
        </div>
        <div class="right space-between">
          <span class="operate">
            <img v-show="item.video_url" :src="video" alt />
          </span>
          <span class="more" @click.stop="toShowModel(item)">
            <img :src="moreMes" alt />
          </span>
        </div>
      </div>
    </div>
    <!-- 专辑列表数据展示 -->
    <div class="album-list" v-show="navIndex == 2">
      <div class="album-t space-between">
        <div class="album-t-l fs-36">按发行时间排序</div>
        <div class="album-t-r fs-28">
          <div class="img" @click="checkSortModel1">
            <img :src="sort" alt />
          </div>
          <span>排序</span>
        </div>
      </div>
      <div class="album-l">
        <div
          class="album-item"
          v-for="(item,index) in albumList"
          :key="index"
          @click="toAblumDetail(item.music_list_id)"
        >
          <div class="item-l">
            <div class="img">
              <img :src="item.music_list_photo" alt />
            </div>
          </div>
          <div class="item-r">
            <div class="title">
              <span class="name fs-32">{{item.singerName}}</span>
              <span class="songName fs-32">{{item.music_list_name}}</span>
            </div>
            <div class="time">
              <span class="time fs-22">{{item.issue_date}}</span>
              <span class="num fs-22">,{{item.music_number}}&nbsp;首</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视屏列表数据展示 -->
    <div class="video-list" v-show="navIndex == 3">
      <div
        class="item"
        v-for="(item,index) in videoList"
        :key="index"
        @click="toVideoDetail(item.video_id)"
      >
        <div class="video">
          <video
            id="myVideo"
            :src="item.video_url"
            ref="video"
            x5-playsinline="true"
            playsinline="true"
            webkit-playsinline="true"
            :poster="item.video_cover"
          ></video>
          <div class="play-btn">
            <img :src="playVideoB" alt />
          </div>
          <div class="play-mes">
            <img :src="playVideoS" alt />
            <span class="txt fs-24">{{item.run_num}}</span>
          </div>
        </div>
        <div class="text fs-28">
          <span class="fs-28">{{item.title}}-{{item.content}}</span>
        </div>
      </div>
    </div>
    <!-- 列表区域  歌手信息数据展示 -->
    <div class="singer-mes-box" v-show="navIndex == 4">
      <div class="tit fs-36">{{singerMes.singer_artistic_name}}简介</div>
      <div class="message fs-32">{{singerMesShort}}</div>
    </div>
    <!-- 歌手信息简介数据展示 -->
    <div class="singer-mes"></div>
    <div class="model" v-show="isShow">
      <img
        :src="songSheetObj.song_sheet_photo||singerMes.singer_avator||baseImg"
        alt
        class="background"
      />
      <div class="header space-between">
        <span class="title fs-36">歌单</span>
        <img :src="closeSheet" @click="closeModel" alt />
      </div>
      <img class="sheet-photo" :src="songSheetObj.song_sheet_photo" alt />
      <div class="tit fs-38">{{sheetMes.song_sheet_name}}</div>
      <div class="main">
        <p class="tips fs-32">标签：{{sheetMes.song_sheet_category_name}}</p>
        <p class="mes fs-32">简介：{{sheetMes.song_sheet_content}}</p>
      </div>
    </div>
    <!-- 底部播放器的实现 -->
    <!-- <player :isFull="store.isFullPlay" v-if="musicMes"></player> -->
    <!-- <playSlip></playSlip> -->
    <div class="sort-model" v-show="showSortModel" @click="closeSortModel" @touchmove.prevent>
      <div class="mes-box">
        <div
          class="item"
          v-for="(item,index) in sortList"
          :key="index"
          @click.stop="changeSortType(item)"
        >
          {{item.content}}
          <img :src="sortChoose" alt v-show="item.status == songListStatus" />
        </div>
      </div>
    </div>
    <div class="sort-model1" v-show="showSortModel1" @click="closeSortModel1" @touchmove.prevent>
      <div class="mes-box">
        <div
          class="item"
          v-for="(item,index) in sortList"
          :key="index"
          @click.stop="changeSortType1(item)"
        >
          {{item.content}}
          <img :src="sortChoose" alt v-show="item.status == albumListStatus" />
        </div>
      </div>
    </div>
    <songMore :showSongMore="showSongMore" :musicObject="musicObject" @fn="getSongMoreStatus"></songMore>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "song-sheet",
  inject: ["reload"],
  data() {
    return {
      musicMes: {},
      playBtnS: require("@/assets/index/playVideoS.png"),
      coverImgUrl: "",
      isSinger: false,
      store: this.getStore(),
      list_category_id: null, //排行榜id
      songSheetObj: {},
      singerMes: {},
      singerMesShort: "",
      sheetMes: {},
      isCollect: false,
      tipString: "",
      isShow: false,
      id: 1, //歌单id
      title: "歌单",
      isBack: true,
      showSongMore: false, //展示歌曲更多模态框
      isSongSheet: true,
      songPic: require("@/assets/image/songList.png"),
      headerPic: require("@/assets/image/headerPic.png"),
      chat: require("@/assets/index/chat.png"),
      share: require("@/assets/index/share.png"),
      collect: require("@/assets/index/collect.png"),
      collected: require("@/assets/index/red-heart.png"),
      downLoad: require("@/assets/index/downLoad.png"),
      playAll: require("@/assets/index/playAll.png"),
      selected: require("@/assets/index/selected.png"),
      operate: require("@/assets/index/operate.png"),
      video: require("@/assets/index/video.png"),
      moreMes: require("@/assets/index/moreMes.png"),
      closeSheet: require("@/assets/index/closeSheet.png"),
      sort: require("@/assets/index/sort.png"),
      concern: require("@/assets/index/concern.png"),
      noconcern: require("@/assets/index/noconcern.png"),
      ticket: require("@/assets/image/ticket.png"),
      sortChoose: require("@/assets/index/sortChoose.png"),
      baseImg: require("@/assets/account/singerbg.png"),
      playVideoS: require("@/assets/index/playVideoS.png"),
      playVideoB: require("@/assets/index/playVideoB.png"),
      lookMore: require("@/assets/index/more-singer.png"),
      exclusive:require("@/assets/index/exclusive.png"),
      payment:require("@/assets/index/payment.png"),
      songList: [],
      music_from: 3, //歌曲来自哪里
      isSelected: false, //判断当前歌单是否是已收藏状态
      sheetStatus: 1, //1表示歌单  2 表示歌手   3表示排行榜
      type: 1,
      typeName: "", //排行榜名称
      singer_id: 1,
      navIndex: 1,
      headerNav: [
        {
          id: 1,
          text: "单曲",
          number: 63
        },
        {
          id: 2,
          text: "专辑",
          number: 63
        },
        {
          id: 3,
          text: "视频",
          number: 63
        },
        {
          id: 4,
          text: "简介",
          number: ""
        }
      ],
      albumList: [
        {
          id: 1,
          img: "",
          singerName: "林宥嘉",
          title: "别让我走远",
          time: "2019-3-10",
          numn: 1
        },
        {
          id: 1,
          img: "",
          singerName: "林宥嘉",
          title: "别让我走远",
          time: "2019-3-10",
          numn: 1
        },
        {
          id: 1,
          img: "",
          singerName: "林宥嘉",
          title: "别让我走远",
          time: "2019-3-10",
          numn: 1
        },
        {
          id: 1,
          img: "",
          singerName: "林宥嘉",
          title: "别让我走远",
          time: "2019-3-10",
          numn: 1
        }
      ], //专辑列表
      videoList: [
        {
          id: 1,
          img: "",
          text: "2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某..."
        },
        {
          id: 2,
          img: "",
          text: "2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某..."
        },
        {
          id: 3,
          img: "",
          text: "2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某..."
        },
        {
          id: 4,
          img: "",
          text: "2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某..."
        }
      ], //视屏列表
      sortList: [
        {
          id: 1,
          status: 1,
          content: "按发行时间排序"
        },
        {
          id: 2,
          status: 2,
          content: "按热度排序"
        }
      ], //排序数据
      musicObject: {}, //音乐信息
      showSortModel: false, //是否展示排序模态框
      showSortModel1: false, //是否展示专辑    排序模态框
      songListStatus: 1, //歌曲单曲的排序方式
      albumListStatus: 1, //专辑列表的排序方式
      list_category_name: "", //排行榜类型名称
      playingList: [], //当前播放歌曲所在的播放列表
      collectMessage: "确定收藏歌单?",
      leaderModal: false, //控制微信内分享模态框
      shareObject: {} //分享的对象
    };
  },
  components: {},
  watch: {
    isPlay: function() {
      if (this.isPlay) {
        this.$refs.player.play();
        this.playControl();
        this.currentLyric.play();
      } else {
        this.currentLyric.stop();
        this.$refs.player.pause();
      }
    },
    playingList: function(val) {}
  },
  methods: {
    // 获取歌手主页头部分享按钮的点击状态
    getShareStatus(e) {
      this.toShare();
    },
    // 关注歌手
    followSinger() {
      console.log(this.singerMes.singer_id, "--this.singerMes.singer_id");
      const url = this.$host1 + `home/attentionSinger`;
      var params = {
        singer_id: this.singerMes.singer_id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingerMes();
          } else if (res.data.code == 0) {
            this.AlertWin("未获取到用户信息，请去登录");
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 跳转到歌手主页
    toPersonHome() {
      console.log(this.singerMes.singer_id, "---this.singerMes.singer_id");
      this.$router.push({
        path: "/singerhome",
        query: { user_id: this.singerMes.singer_id }
      });
    },
    // 播放全部
    playAllMusic() {
      console.log(this.songList, "---this.songList");
    },
    // 获取我喜欢的歌曲信息
    getMyLove() {
      const url = this.$host1 + `home/myFavouriteMusicList`;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--我喜欢的歌曲列表信息");
          if (res.data.code == 200) {
            this.songSheetObj = {
              song_sheet_name: res.data.data.top.name,
              song_sheet_photo: res.data.data.top.background,
              nickname: res.data.data.top.nickname,
              user_avator: res.data.data.top.user_avator,
              song_sheet_content: res.data.data.top.name,              
            };
            this.coverImgUrl = res.data.data.top.background;
            this.songList = res.data.data.list;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    // 去分享
    toShare() {
      console.log(this.sheetStatus, "---this.sheetStatus");
      if (this.sheetStatus == 1) {
        // 表示当前是歌单
        this.shareObject = {
          title: "分享歌单",
          desc: this.songSheetObj.song_sheet_name,
          img: this.songSheetObj.song_sheet_photo
        };
      } else if (this.sheetStatus == 2) {
        // 表示当前是歌手
        this.shareObject = {
          title: "分享歌手",
          desc: this.singerMes.singer_artistic_name,
          img: this.singerMes.singer_avator
        };
      } else if (this.sheetStatus == 3) {
        // 表示当前是排行榜
        this.shareObject = {
          title: "分享排行榜",
          desc: this.songSheetObj.song_sheet_name,
          img: this.songSheetObj.song_sheet_photo
        };
      }
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          this.shareObject.title,
          this.shareObject.desc,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.shareObject.img,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.shareObject.title,
            description: this.shareObject.desc,
            shareimg: this.shareObject.img,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 去歌曲评论页面
    toComment(num) {
      if (this.sheetStatus == 1) {
        // 表示当前是歌单状态
        this.$router.push({
          path: "/index/comment",
          query: { status: this.sheetStatus, id: this.id }
        });
      } else if (this.sheetStatus == 3) {
        //表示当前是排行榜进来的
        this.$router.push({
          path: "/index/comment",
          query: { status: this.sheetStatus, id: this.list_category_id }
        });
      }
    },
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 展开歌曲更多模态框
    toShowModel(item) {
      this.musicObject = item;
      this.showSongMore = true;
    },
    // 批量操作
    toOperation() {
      if (this.songList.length == 0) {
        this.AlertWin("当前歌单下没有歌曲奥");
        return;
      }
      this.$router.push({
        path: "/index/batch-operation",
        query: { list: this.songList }
      });
    },
    // 去视频详情页面
    toVideoDetail(id) {
      this.$router.push({
        path: "/index/video-Detail",
        query: { id: id }
      });
    },
    // 点击播放的时候掉的接口
    isPlayingNow(id) {
      const url = this.$host1 + `home/dynamic/playMusic`;
      var params = {
        music_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
          } else {
            // this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点击播放的时候掉的接口
    getConunt(id) {
      const url = this.$host1 + `home/addRunNum`;
      var params = {
        music_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 选择歌手 去歌手主页
    checkSinger() {
      this.$router.push({
        path: "/singerhome",
        query: { user_id: this.songSheetObj.user_id }
      });
    },
    // 跳转到专辑详情页
    toAblumDetail(id) {
      this.$router.push({
        path: "/index/album-detail",
        query: { id: id }
      });
    },
    // 展示排序模态框
    checkSortModel() {
      this.showSortModel = true;
    },
    // 展示   专辑   排序模态框
    checkSortModel1() {
      this.showSortModel1 = true;
    },
    // 中间导航栏切换高亮
    checkNav(id) {
      this.navIndex = id;
      if (id == 1) {
        this.getSingerList();
      } else if (id == 2) {
        this.getAlbumList();
      } else if (id == 3) {
      } else if (id == 4) {
        this.getSingerMesList();
      }
    },
    // 选择排序类型
    changeSortType(item) {
      this.songListStatus = item.status;
      this.getSingerList();
      this.showSortModel = false;
    },
    // 选择排序类型
    changeSortType1(item) {
      this.albumListStatus = item.status;
      this.getAlbumList();
      this.showSortModel1 = false;
    },
    // 关闭专辑模态框
    closeSortModel1() {
      this.showSortModel1 = false;
    },
    // 关闭排序模态框
    closeSortModel() {
      this.showSortModel = false;
    },
    // 打开收藏歌单模态框
    openCollectModel() {
      if (this.isCollect) {
        this.collectMessage = "确定取消收藏此歌单?";
      } else {
        this.collectMessage = "确定收藏歌单?";
      }
      MessageBox({
        title: "",
        message: this.collectMessage,
        showCancelButton: true
      })
        .then(action => {
          if (action == "confirm") {
            this.collectSongSheet();
          }
        })
        .catch(error => {
          if (error == "cancel") {
            console.log("点击取消");
          }
        });
    },
    // 收藏歌单
    collectSongSheet() {
      const url = this.$host1 + `home/collectSongSheet`;
      var params = {
        song_sheet_id: this.id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.isCollect = !this.isCollect;
            this.AlertWin(res.data.data.message);
          } else if (res.data.code == 0) {
            this.AlertWin("未获取到用户信息，请前去登录");
          } else {
            this.AlertWin(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 去歌曲播放页面
    toSonDetail(item) {
      // console.log(this.typeName, "---this.typeName");
      console.log(this.sheetStatus, "---this.sheetStatus");
      if (this.sheetStatus == 3) {
        this.music_from = 4; //表示从排行榜进来的
        this.list_category_name = this.typeName;
        this.store.setData(
          item.music_id,
          this.music_from,
          this.list_category_name
        );
        // console.log(this.list_category_name,'---this.list_category_name--99');
      } else if (this.sheetStatus == 2) {
        this.music_from = 5; //表示从歌手单曲进来的
        this.store.setData(item.music_id, this.music_from, this.songListStatus);
      } else if (this.sheetStatus == 1) {
        this.music_from = 3; //表示从分类歌单进来的
        this.store.setData(item.music_id, this.music_from, this.id);
      } else if (this.sheetStatus == 0) {
        this.music_from = 6; //表示从我喜欢的音乐
        this.store.setData(item.music_id, this.music_from);
      }
      this.musicMes = window.localStorage.getItem("musicMes");
      this.music_id = item.music_id;
      this.getSongSheetPlayingList();
      this.getConunt(item.music_id);
      this.isPlayingNow(item.music_id);
    },
    // 打开歌单简介模态框
    showModel() {
      this.isShow = true;
    },
    // 关闭模态框
    closeModel() {
      this.isShow = false;
    },
    // 获取歌单列表信息  歌单简介头部的信息
    getSongList() {
      const url =
        this.$host1 + `/home/getMusicBySongSheet?song_sheet_id=` + this.id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--444");
          if (res.data.code == 200) {
            this.songSheetObj = {
              song_sheet_name: res.data.data.top.song_sheet_name,
              song_sheet_photo: res.data.data.top.song_sheet_photo,
              nickname: res.data.data.top.nickname,
              user_avator: res.data.data.top.user_avator,
              song_sheet_content: res.data.data.top.song_sheet_content,
              share_num: res.data.data.top.share_num,
              comments_num: res.data.data.comments_num,
              music_num: res.data.data.music_num,
              user_id: res.data.data.top.user_id,
              run_num:res.data.data.top.run_num
            };
            (this.coverImgUrl = res.data.data.top.song_sheet_photo),
              (this.songList = res.data.data.list);
            // console.log(this.songList,'===this.songList');
            // console.log(this.songSheetObj,'---this.songSheetObj');
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },

    // 获取歌单信息接口
    getSheetMes() {
      const url = this.$host1 + `home/songSheetMsg?song_sheet_id=` + this.id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data.result, "---res.data.data.data.result--");
          if (res.data.code == 200) {
            this.sheetMes = {
              song_sheet_photo: res.data.data.result.song_sheet_photo,
              song_sheet_name: res.data.data.result.song_sheet_name,
              song_sheet_category_name:
                res.data.data.result.song_sheet_category_name,
              song_sheet_content: res.data.data.result.song_sheet_content
            };
            // console.log(this.sheetMes,'---this.sheetMes---99');
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取排行榜数据接口
    getRankList() {
      const url =
        this.$host1 +
        `home/metRankingList?list_name=` +
        this.typeName +
        `&type=` +
        this.type;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.songSheetObj = {
              song_sheet_name: res.data.data.top.list_category_name,
              song_sheet_photo: res.data.data.top.list_category_photo,
              music_update_time: res.data.data.top.music_update_time,
              share_num: res.data.data.top.share_num,
              comments_num: res.data.data.top.comments_num,
              music_num: res.data.data.music_num
            };
            (this.coverImgUrl = res.data.data.top.list_category_photo),
              (this.songList = res.data.data.list);
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌手歌单主页歌手信息
    getSingerMes() {
      const url =
        this.$host1 + `home/singerCenterMsg?singer_id=` + this.singer_id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--1");
          if (res.data.code == 200) {
            this.singerMes = res.data.data;
            this.coverImgUrl = this.singerMes.singer_avator;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌手歌单列表接口
    getSingerList() {
      const url =
        this.$host1 +
        `home/singerOneMusic?singer_id=` +
        this.singer_id +
        `&status=` +
        this.songListStatus;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.songSheetObj = {
              music_num: res.data.data.num
            };
            this.headerNav[0].number = res.data.data.num;
            this.songList = res.data.data.list;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌手页面专辑列表的数据
    getAlbumList() {
      const url =
        this.$host1 +
        `home/singerMusicList?singer_id=` +
        this.singer_id +
        `&status=` +
        this.albumListStatus;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.albumList = res.data.data.list;
            this.headerNav[1].number = res.data.data.num;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取列表区域歌手简介信息接口
    getSingerMesList() {
      const url =
        this.$host1 + `home/singerMainMsg?singer_id=` + this.singer_id;
      this.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            this.singerMesShort = res.data.data.singer_message;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌手主页的视屏列表数据
    getSingerVideoList() {
      const url = this.$host1 + `home/singerVideo?singer_id=` + this.singer_id;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.videoList = res.data.data.list;
            this.headerNav[2].number = res.data.data.num;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取播放列表的数据接口部分
    getPlayingData(url) {
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.playingList = res.data.data.list;
            this.store.playingList = this.playingList;
            window.localStorage.setItem(
              "playingList",
              JSON.stringify(this.playingList)
            );
            this.store.isPlay = true;
            this.store.isFullPlay = true;
            // console.log(this.playingList,'--this.playingList--song-sheet-播放列表');
          } else if(res.data.code == 0){
            // 等于0   去支付
            // this.AlertWin(res.data.data.message);
            this.$router.push({
              path:'/index/music-vip',
              query:{id:this.music_id}
            });
          }else if (res.data.code == 1) {
            // 等于1 去登录
            this.AlertWin(res.data.data.message);
            this.$router.push({ path: "/login" });
          }else {
            this.AlertWin(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 判断  歌单  专辑 排行榜是否被收藏
    judgeCollect(id, type) {
      const url = this.$host1 + `home/IsCollect`;
      var params = {
        mix_id: id,
        type: type
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 0) {
            // 表示当前未被收藏
            this.isCollect = false;
            this.collectMessage = "确定收藏此歌单?";
          } else if (res.data.code == 1) {
            this.isCollect = true;
            this.collectMessage = "确定取消收藏此歌单?";
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌单列表的播放列表
    getSongSheetPlayingList() {
      if (this.music_from == 6) {
        // 表示从歌手单曲过来的
        const url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          `&music_from=` +
          this.music_from;
        this.getPlayingData(url);
        return;
      }
      if (this.music_from == 1) {
        // 表示从歌手单曲过来的
      } else if (this.music_from == 2) {
        // 表示从专辑过来的
      } else if (this.music_from == 3) {
        // console.log(this.music_from, "---this.music_from-0");
        // 表示从歌单过来的
        const url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          `&music_from=` +
          this.music_from +
          `&song_sheet_id=` +
          this.id;
        this.getPlayingData(url);
      } else if (this.music_from == 4) {
        // 表示从排行榜过来的
        // console.log(this.music_from, "---this.music_from----4444");
        const url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          `&music_from=` +
          this.music_from +
          `&list_category_name=` +
          this.list_category_name;
        this.getPlayingData(url);
      } else if (this.music_from == 5) {
        const url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          `&music_from=` +
          this.music_from +
          `&status=` +
          this.songListStatus;
        this.getPlayingData(url);
      }
    }
    // 分享歌单，排行榜
  },
  created() {
    this.musicMes = window.localStorage.getItem("musicMes");
    this.isSinger = Boolean(this.$route.query.isSinger);
    this.id = this.$route.query.id;
    this.sheetStatus = this.$route.query.sheetStatus / 1;
    if (this.sheetStatus == 1) {
      // 表示歌单专辑过来的
      this.getSongList();
      this.getSheetMes();
      var type = 1;
      this.judgeCollect(this.id, type); //判断当前歌单是否被收藏
    } else if (this.sheetStatus == 2) {
      this.title = "歌手";
      this.singer_id = this.$route.query.id;
      this.getSingerList();
      this.getAlbumList();
      this.getSingerMes();
      this.getSingerVideoList();
    } else if (this.sheetStatus == 3) {
      this.typeName = this.$route.query.name;
      this.list_category_id = this.$route.query.id;
      this.title = "排行榜";
      var type = 2;
      this.judgeCollect(this.list_category_id, type); //判断当前歌单是否被收藏
      switch (this.typeName) {
        case "热歌榜":
          this.type = 1;
          break;
        case "新歌榜":
          this.type = 2;
          break;
        case "畅销榜":
          this.type = 3;
          break;
        case "原创榜":
          this.type = 4;
          break;
      }
      this.getRankList();
    } else if (this.sheetStatus == 0) {
      // 表示是从我喜欢的歌曲进入的
      this.getMyLove();
    }
    // // 记录进入app时的url
    // if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
    //   window.entryUrl = location.href.split("#")[0];
    // }
    // this.wxshare.getWxmessage(
    //   "分享歌单",
    //   `[夏日终曲] 沙滩摇滚与褪去炽热的海风`,
    //   /(Android)/i.test(navigator.userAgent)
    //     ? location.href.split("#")[0]
    //     : window.entryUrl,
    //   `https://test.izhixiu.cn/www/met/musicstore/static/img/thanks.14b43e2.png`
    //   // ${this.songSheetObj.song_sheet_photo}
    //   // this.songSheetObj.song_sheet_name
    //   // http://music.izhixiu.cn/frontend/index.html#/index/song-sheet?id=${this.id}?sheetStatus=${this.sheetStatus}
    // );
  },
  mounted() {},
  updated() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100vh;
  .headerImg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 1rem;
    .background {
      width: 100%;
      height: 100%;
      z-index: -1;
      // margin-left: -1rem;
      // margin-top: -1rem;
      left: 0;
      top: 0;
      position: absolute;
      filter: blur(0.7rem);
    }
  }
  .tip {
    width: 100%;
    position: relative;
    // background: linear-gradient(to right, #c0a0a3, #8f6980);
    .background {
      width: 100%;
      height: 100%;
      z-index: -1;
      // margin-left: -1rem;
      // margin-top: -1rem;
      left: 0;
      top: 0;
      position: absolute;
      filter: blur(0.7rem);
    }
    .top {
      width: 100%;
      padding: 1.72rem 0.38rem 0 0.23rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      margin-bottom: 0.52rem;
      .left {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
        overflow: hidden;
        margin-right: 0.24rem;
        img {
          width: 100%;
          border-radius: 0.06rem;
          // height: 100%;
          object-fit: cover;
        }
        .play-mes {
          position: absolute;
          display: flex;
          align-items: center;
          right: 0.15rem;
          top: 0.15rem;
          .img {
            width: 0.16rem;
            height: 0.19rem;
            margin-right: 0.1rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          span {
            font-size: 0.22rem;
            color: #fff;
          }
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        .title {
          font-weight: 800;
          color: rgba(255, 255, 255, 1);
          line-height: 0.48rem;
          margin-bottom: 0.18rem;
        }
        .singers {
          display: table-cell;
          vertical-align: middle;
          // margin-bottom: 0.2rem;
          .imgs {
            display: inline-block;
            width: 0.45rem;
            height: 0.45rem;
            img {
              display: inline-block;
              vertical-align: middle;
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 50%;
              margin-right: 0.13rem;
            }
          }
          .txt {
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 32px;
            opacity: 0.6;
            position: relative;
            img {
              position: absolute;
              right: -0.4rem;
              top: 0.05rem;
              width: 0.16rem;
              height: 0.3rem;
            }
          }
        }
        .areatop {
          height: 0.6rem;
        }
        .areatop .more::after {
          border-color: #fff;
          right: 3.3rem;
          margin-top: 0.2rem;
        }
        .song {
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 32px;
          opacity: 0.6;
          &.areatop .more::after {
            // right: 1rem;
            margin-top: 0.23rem;
          }
        }
      }
    }
    .top-singer {
      width: 100%;
      padding: 1.72rem 0.38rem 0 0.23rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding-bottom: 0.92rem;
      // 歌手头部样式
      .top-h {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.3rem;
        .top-h-left {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.2rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            display: flex;
            flex-direction: column;
            .tit {
              font-weight: 800;
              color: rgba(255, 255, 255, 1);
              line-height: 0.48rem;
              margin-bottom: 0.2rem;
            }
            .tips {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
        .right {
          display: flex;
          flex-direction: row;
          text-align: center;
          .home-page,
          .concern {
            width: 1.4rem;
            height: 0.6rem;
            line-height: 0.6rem;
            border-radius: 0.3rem;
            background: rgba(255, 255, 255, 0.6);
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
          }
          .concern {
            background: rgba(116, 8, 180, 1);
            color: rgba(255, 255, 255, 1);
            margin-left: 0.16rem;
            padding: 0 0.2rem 0 0.2rem;
            text-align: right;
            box-sizing: border-box;
            position: relative;
            img {
              width: 0.22rem;
              height: 0.22rem;
              position: absolute;
              left: 0.2rem;
              top: 0.2rem;
            }
          }
        }
      }
      .top-b {
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
        .fans {
          margin-right: 0.16rem;
        }
      }
    }
    // 头部icon的样式
    .icons {
      padding: 0 0.66rem 0 0.6rem;
      height: 1.3rem;
      // background: linear-gradient(to right, #c0a0a3, #8f6980);
      .item {
        text-align: center;
        img {
          display: block;
          margin: 0 auto;
          width: 0.48rem;
          height: 0.45rem;
          margin-bottom: 0.14rem;
        }
        .text {
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 0.32rem;
        }
      }
    }
    // .rankBgc {
    //   background: linear-gradient(to right, #5e02a9, #8c11c2);
    // }
    // .singerBgc {
    //   background: linear-gradient(to right, #a0c0c7, #b19194, #9ab5bb);
    // }
  }
  // .singerBgc {
  //   background: linear-gradient(to right, #a0c0c7, #b19194, #9ab5bb);
  // }
  // .rankBgc {
  //   background: linear-gradient(to right, #5e02a9, #8c11c2);
  // }
  //  歌手主页的中间导航部分的样式
  .header-nav {
    width: 100%;
    height: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0.32rem;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 0.01rem solid #e9e9e9;
    background-color: #fff;
    .singles {
      position: relative;
      .tit {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 0.36rem;
      }
      .number {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 0.36rem;
      }
      .line {
        display: block;
        position: absolute;
        left: 50%;
        bottom: -0.35rem;
        transform: translate(-50%);
        width: 0.6rem;
        height: 0.08rem;
        background-color: #7408b4;
        border-radius: 0.03rem;
      }
    }
  }
  // 歌曲列表部分的样式
  .song-list {
    padding: 0.46rem 0.27rem 1.5rem;
    background-color: #fff;
    box-sizing: border-box;
    .title {
      margin-bottom: 0.2rem;
      .left {
        .icon {
          width: 0.38rem;
          height: 0.38rem;
          margin-right: 0.16rem;
          img {
            width: 100%;
          }
        }
        .tit {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
          margin-right: 0.32rem;
        }
        .num {
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
          // line-height:36px;
        }
      }
      .right {
        .icon {
          width: 0.28rem;
          height: 0.3rem;
          margin-right: 0.15rem;
          img {
            width: 100%;
          }
        }
        .txt {
          font-weight: 800;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
        }
      }
    }
    .list {
      display: flex;
      flex-direction: row;
      padding: 0.41rem 0 0.38rem;
      box-sizing: border-box;
      border-bottom: 0.01rem solid #e9e9e9;
      .left {
        display: flex;
        flex-direction: column;
        .song-name {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
          margin-bottom: 0.22rem;
        }
        .mes {
          display: flex;
          align-items: center;
          img {
            width: 0.5rem;
            height: 0.24rem;
            vertical-align: middle;
            display: inline-block;
            margin-right: 0.11rem;
          }
          .txt {
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 0.36rem;
            white-space: wrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
      }
      .right {
        .operate {
          width: 0.35rem;
          height: 0.37rem;
          margin-right: 0.44rem;
          img {
            width: 100%;
          }
        }
        .more {
          width: 0.08rem;
          height: 0.36rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  // 专辑列表的样式
  .album-list {
    width: 100%;
    padding: 0.43rem 0.25rem 1rem;
    box-sizing: border-box;
    background-color: #fff;
    .album-t {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      line-height: 0.36rem;
      .album-t-r {
        font-weight: 800;
        color: rgba(68, 68, 68, 1);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .img {
          width: 0.25rem;
          height: 0.25rem;
          margin-right: 0.15rem;
          img {
            width: 100%;
          }
        }
      }
    }
    // 专辑列表
    .album-l {
      width: 100%;
      margin-top: 0.24rem;
      .album-item {
        width: 100%;
        height: 1.8rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        .item-l {
          margin-right: 0.35rem;
          .img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.12rem;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
        .item-r {
          display: flex;
          flex-direction: column;
          .title {
            font-weight: 500;
            margin-bottom: 0.42rem;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            .name {
              color: #540479;
            }
            .songName {
              color: #444444;
            }
          }
          .time {
            color: #999999;
          }
        }
      }
    }
  }
  // 视频列表样式的设置
  .video-list {
    width: 100%;
    padding: 0.24rem 0.22rem 1rem 0.24rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
    .item {
      width: 3.4rem;
      margin-right: 0.12rem;
      margin-bottom: 0.32rem;
      .video {
        position: relative;
        width: 3.44rem;
        height: 1.96rem;
        border-radius: 0.16rem;
        overflow: hidden;
        margin-bottom: 0.23rem;
        #myVideo {
          width: 100%;
          height: 100%;
        }
        .play-btn {
          position: absolute;
          left: 50%;
          top: 40%;
          transform: translateX(-50%);
          width: 0.38rem;
          height: 0.46rem;
          img {
            width: 100%;
          }
        }
        .play-mes {
          position: absolute;
          bottom: 0.21rem;
          left: 0.18rem;
          img {
            width: 0.16rem;
            height: 0.19rem;
            display: inline-block;
          }
          .txt {
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.48rem;
          }
        }
      }
      .text {
        span {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          line-height: 0.36rem;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  // 列表区域   歌手信息简介样式设置
  .singer-mes-box {
    width: 100%;
    padding: 0.34rem 0.24rem 1rem;
    box-sizing: border-box;
    background-color: #fff;
    .tit {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      line-height: 0.32rem;
      margin-bottom: 0.43rem;
    }
    .message {
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 0.48rem;
    }
  }
  .model {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    // background: linear-gradient(to right, #c0a0a3, #8f6980);
    .background {
      width: 100%;
      height: 100%;
      z-index: -1;
      // margin-left: -1rem;
      // margin-top: -1rem;
      left: 0;
      top: 0;
      position: absolute;
      filter: blur(0.2rem);
    }
    .header {
      margin-top: 0.35rem;
      padding: 0 0.33rem 0 3.39rem;
      box-sizing: border-box;
      .title {
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
      }
      img {
        width: 0.37rem;
        height: 0.37rem;
      }
    }
    .sheet-photo {
      margin: 2.04rem auto 0.56rem;
      width: 3.44rem;
      height: 3.44rem;
    }
    .tit {
      text-align: center;
      margin-bottom: 0.8rem;
      font-weight: 800;
      color: rgba(255, 255, 255, 1);
      line-height: 0.56rem;
    }
    .main {
      padding: 0 0.45rem 0 0.35rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      // line-height:0.32rem;
      .tips {
        margin-bottom: 0.38rem;
      }
      .mes {
        line-height: 0.56rem;
      }
    }
  }
  // 排序模态框样式
  .sort-model,
  .sort-model1 {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.6);
    animation-name: animation1;
    animation-duration: 5s;
    animation-direction: normal;
    .mes-box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-radius: 0.12rem 0.12rem 0 0;
      padding: 0 0.25rem;
      box-sizing: border-box;
      background-color: #fff;
      .item {
        position: relative;
        width: 100%;
        height: 1.01rem;
        line-height: 1.01rem;
        border-bottom: 0.01rem solid #dddddd;
        font-size: 0.31rem;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        img {
          position: absolute;
          width: 0.33rem;
          height: 0.25rem;
          right: 0;
          top: 0.3rem;
        }
      }
    }
  }
}
@keyframes animation1 {
  from {
    bottom: -12rem;
  }
  to {
    bottom: 0;
  }
}
</style>
